import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';

import * as MultiAutoCompleteStories from './MultiAutoComplete.stories';

<Meta of={MultiAutoCompleteStories} />

# MultiAutoComplete

The MultiAutoComplete component is a form control that allows users to select multiple values from a dropdown list of options. It supports both selecting from predefined options and adding custom values, making it ideal for tags, categories, or any scenario where multiple selections are needed.

<Canvas of={MultiAutoCompleteStories.Documentation} source={ { code: `

import React, { useState } from "react";
import { MultiAutoComplete } from "@webiny/admin-ui";

const MultiAutoCompleteExample = () => {
const [values, setValues] = useState<string[]>([]);
const [validation, setValidation] = useState({ isValid: true, message: "" });

    const handleValidation = () => {
        if (values.length === 0) {
            setValidation({ isValid: false, message: "Please select at least one option" });
        } else {
            setValidation({ isValid: true, message: "" });
        }
    };

    const timeZones = [
        "Eastern Standard Time (EST)",
        "Central Standard Time (CST)",
        "Pacific Standard Time (PST)",
        "Greenwich Mean Time (GMT)",
    ];

    return (
        <div>
            <MultiAutoComplete
                label="Time Zones"
                description="Select one or more time zones"
                placeholder="Search or select time zones"
                options={timeZones}
                values={values}
                onValuesChange={newValues => {
                    setValues(newValues);
                    handleValidation();
                }}
                validation={validation}
                allowFreeInput={true}
                required={true}
                note="You can add custom time zones if needed"
            />
        </div>
    );
};

export default MultiAutoCompleteExample;

` } }
    additionalActions={[
        {
            title: 'Open in GitHub',
            onClick: () => {
                window.open(
                    'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/MultiAutoComplete/MultiAutoComplete.tsx',
                    '_blank'
                );
            },
        }
    ]}
/>

<Controls of={MultiAutoCompleteStories.Documentation}/>

## Usage

```tsx
import React, { useState } from "react";
import { MultiAutoComplete } from "@webiny/admin-ui";

const MultiAutoCompleteExample = () => {
const [values, setValues] = useState<string[]>([]);
const [validation, setValidation] = useState({ isValid: true, message: "" });

    const handleValidation = () => {
        if (values.length === 0) {
            setValidation({ isValid: false, message: "Please select at least one option" });
        } else {
            setValidation({ isValid: true, message: "" });
        }
    };

    const timeZones = [
        "Eastern Standard Time (EST)",
        "Central Standard Time (CST)",
        "Pacific Standard Time (PST)",
        "Greenwich Mean Time (GMT)"
    ];

    return (
        <div>
            <MultiAutoComplete
                label="Time Zones"
                description="Select one or more time zones"
                placeholder="Search or select time zones"
                options={timeZones}
                values={values}
                onValuesChange={newValues => {
                    setValues(newValues);
                    handleValidation();
                }}
                validation={validation}
                allowFreeInput={true}
                required={true}
                note="You can add custom time zones if needed"
            />
        </div>
    );
};

export default MultiAutoCompleteExample;
```
